@charset "utf-8";
/* CSS Document */

html {
  font-family:Verdana, Geneva, sans-serif;
  overflow-y:scroll;
}
html, body, header, section, nav {
  margin:0;
  padding:0;
}
body {
  background-color:rgba(0, 153, 255, .5);
  padding:0 10%;
}
header, section {
  display:block;
  background-color:#fff;
  border:5px solid #e8e8e8;
}
a {
  color:blue;
  text-decoration:underline;
  cursor:pointer;
}

header {
  padding:2%;
  margin:0 auto;
  border-width:0 5px 5px;
}
section {
  margin-top:35px;
}
div#userdetails {
  position:relative;
  min-height:168px;
  padding:0 2% 0 275px;
  display:none;
}
img#avatar {
  max-width:252px;
  max-height:168px; /* laut Last.fm */
  position:absolute;
  left:0;
  top:0;
  opacity:0;
}
h1#username {
  margin-top:0;
}
a#userlink {
  font-size:1.33em;
}

header input, input#fetch-results, input[type^="date"], input[type="text"], select {
  border:1px solid #eee;
  padding:5px;
}
input[type^="date"] {
  text-align:right;
}
header input, input#fetch-results {
  font-size:2em;
}
input#name {
  color:#09f;
  width:65%;
  font-weight:900;
}
input#submit, input#fetch-results {
  color:#fff;
  background-color:#0099FF;
}
input#name::-webkit-input-placeholder {
  color:rgba(0, 153, 255, .5);
}
input#name:-moz-placeholder {
  color:rgba(0, 153, 255, .5);
}

#map {
  height:500px;
  width:100%;
}

section#controls {
  padding:2%;
  text-align:center;
  display:none;
}
div#progress-wrapper {
  position:relative;
  display:none;
}
p#progress-status {
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  text-align:center;
  line-height:20px;
  font-size:20px;
  margin-top:-10px;
  color:#FFF;
  text-shadow:1px 1px 0 #000;
}
progress#fetch-progress {
  width:100%;
  height:80px;
}
div#slider-wrapper {
  margin:10px 0;
}
div#radius-slider {
  width:80%;
  margin:0 auto 20px;
}
input#radius-slider-value {
  text-align:center;
  width:60px;
}
span#progress-status-percent {
  font-weight:900;
  font-size:2em;
  margin-right:10px;
}

div.clearleft {
  clear:left;
}

div.lfm-result {
  background-color:#fff;
  color:#09f;
  position:relative;
}
div.lfm-result:nth-child(odd) {
  background-color:#09f;
  color:#fff;
}
div.lfm-result:target {
  background-color:#090 !important;
  color:#fff !important;
}
div.lfm-result img {
  float:left;
  margin-right:7.5px;
}
div.lfm-result h1 {
  margin:0 0 5px 0;
}
div.lfm-result h1 + p{
  margin:0;
}
div.lfm-result a {
  color:inherit;
}
div.lfm-result span.map-icon {
  background:top left no-repeat url(location.png);
  width:32px;
  height:32px;
  position:absolute;
  top:5px;
  right:5px;
}